<template>

	<view class="container">
		<image src="/static/back8.jpg" class="background"
			mode="">
		</image>
		<view class="content">
			<view class="img">
				<image src="/static/logo.png" mode=""></image>
			</view>

			<view class="name">
				大辛辅导班教师端
			</view>
			<view class="" style="height: 40%;">
				<view class="input">
					<label>手机号:</label>

					<input type="text" :class="{ error: isPhoneNumberInvalid }" v-model="phoneNumber" />
				</view>
				<view class="input">
					<label>密码：</label> <input type="text" :class="{ error: isValidPassword }" v-model="password"
						@input="validatePassword" />
				</view>

			</view>
			<view class="button">
				<button @click="login">账号密码登录</button>
			</view>
		</view>
	</view>
</template>









<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				phoneNumber: "",
				password: "123456",
				isValidPassword: false,
				isPhoneNumberInvalid: false,
			}
		},
		onLoad() {
			let that=this;
			uni.getStorage({
				key:'teacher',
				success(res) {
					let info =res.data;
					that.phoneNumber=info.phone
				}
			})
		},
		methods: {
			validatePhoneNumber() {
				const regex = /^1[3-9]\d{9}$/;
				return this.isPhoneNumberInvalid = !regex.test(this.phoneNumber); // 更新验证状态  
			},
			validatePassword() {
				const regex = /^\d{6}$/;
				this.isValidPassword = !(regex.test(this.password));
			},
			login() {
				let that = this;
				if(this.validatePhoneNumber()){
					uni.showToast({
						title:"手机号格式不正确",
						icon:null
					})
					
					return
				}
				uni.request({
					url: globalVariable + '/TeacherLogin?phone=' + that.phoneNumber + "&password=" + that.password,
					method: 'POST',
					success: (res) => {
						let info = res.data;
						uni.showToast({
							title: info.message
						})
						if (info.status == 1) {
							//保存登录信息
							uni.setStorage({
								key: "teacher",
								data: info.data
							})
							uni.switchTab({
								url: "/pages/Tmain/Tmain"
							})
						}

					},
					fail: (err) => {
						uni.showToast({
							title: "服务器异常"
						})
					}
				});
			}
		}
	}
</script>



<style scoped>
	.error {
		border: 3px solid red;
		/* 或者其他使input变红的样式 */
	}

	.alert {
		/* color: red; */
	}

	.content .input {
		display: flex;
		font-size: 40rpx;
		height: 150rpx;
		align-items: center;
	}

	.content .input input {
		background-color: rgba(255, 255, 255, 0.7);
		height: 50%;
		border-style: groove;
		border-radius: 10px;
		text-indent: 10px;
		font-size: 20px;
	}

	.loading {
		width: 100%;
		height: 100%;
		position: absolute;
		background-size: 100% 100%;
		z-index: 2;
		background-color: aliceblue;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: royalblue;
		font-size: 20px;
	}

	.loading image {
		width: 400rpx;
		height: 400rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .name {
		margin-top: 30rpx;
		height: 20%;
		font-size: 50rpx;
		color: white;
	}

	.content .button {
		width: 100%;
	}

	.content .button button {
		width: 80%;
		height: 100rpx;
		font-size: 23px;
		background-color: #16cccf;
		color: white;
	}

	.content .button button:active {
		background-color: #11a8a8;
	}

	.content image {

		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
	}

	.background {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		background-size: 100% 100%;
	}

	.content {
		width: 80%;
		height: 80%;
	}
</style>